<template>
	<view>
		<view class="noteCard" v-for="(item,index) in data" @click="selectCard(item,index)" :class="selectFlag && selectArray.indexOf(index) === -1 ? 'selectMode' : '' ">
			<note-card :key='index' :data='item' ref="noteCard" @edit='edit($event)' @deleteQA='deleteQA($event)'></note-card>
		</view>
		<view class="button">
			<view class="select">
				<u-button type="primary" @click="selectNote()" v-if="!selectFlag">多选</u-button>
				<u-button type="primary" @click="selectNote()" v-if="selectFlag">取消多选</u-button>
			</view>
			<view class="delete">
				<u-button type="error" @click="deleteNote()">删除</u-button>
			</view>
		</view>
		<view>
			<u-popup v-model="popupDelete" mode="center">
				<view class="popupDelete">
					<view class="warnText">
						删除后不可恢复，确认删除吗？
					</view>
					<view class="confirmButton">
						<view class="deletebutton">
							<u-button type="error" @click="deleteFinish()">删除</u-button>
						</view>
						<view class="canclebutton">
							<u-button type="default" @click="popupDelete = false">取消</u-button>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectFlag: false,
				selectArray: [],
				delIds:[],
				popupDelete:false
			};
		},
		methods:{
			selectNote(){
				if (this.selectFlag && this.selectArray) {
					this.selectArray = []
				}
				this.selectFlag = !this.selectFlag
				this.$refs.noteCard.forEach((item) => {
					item.cardSelected()
				});
			},
			selectCard(item,index) {
				if (!this.selectFlag) {
					return null
				} else {
					let flag = this.selectArray.indexOf(index)
					if (flag === -1) {
						this.selectArray.push(index)
						this.delIds.push(item.id)
					} else {
						this.selectArray.splice(flag, 1)
						this.delIds.splice(flag, 1)
					}
				}
			},
			deleteNote(){
				this.popupDelete = true
			},
			deleteFinish() {
				if (!this.delIds.length) {
					this.$refs.uToast.show({
						title: '请选择删除的笔记',
						//type: 'success',
					})
					return
				}
				console.log(this.delIds);
				this.$api.delNoteBatch(this.$store.state.access_token, this.delIds.toString())
					.then(res => {
						console.log(res);
						this.delingId = null
						this.delIds = []
						this.$emit('refresh');
						this.$refs.uToast.show({
							title: '删除成功',
							type: 'success'
						})
					})
				this.selectFlag = false
				this.popupDelete = false
			}
		},
		
		props:{
			data:{
				type:Array,
				default(){
					return []
				}
			}
		}
	}
</script>

<style lang="scss">
	.selectMode {
		opacity: 0.45
	}
	.button {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		width: 100%;
		.select {
			width: 50%;
		}

		.delete {
			width: 50%;
		}
	}
	.popupDelete {
		box-sizing: border-box;
		padding: 50rpx;
	
		.confirmButton {
			padding-top: 35rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-evenly;
	
			.deletebutton {
				width: 45%;
			}
	
			.canclebutton {
				width: 45%;
			}
	
		}
	}
</style>
